<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单详情',
  },
}
</route>

<template>
  <view class="bg-gradient-to-b from-blue-50/80 to-orange-50/60 h-full box-border flex flex-col">
    <wd-navbar
      title="订单详情"
      left-arrow
      safeAreaInsetTop
      fixed
      placeholder
      @click-left="handleClickLeft"
    />
    <view class="flex-1 h-full p-4 overflow-y-auto">
      <!-- 头部状态区 -->
      <view
        class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 p-6 text-white shadow-lg animate-fade-in-down"
      >
        <view class="relative z-10">
          <view class="mb-4 flex items-center space-x-3">
            <view class="i-carbon-delivery text-3xl animate-bounce" />
            <text class="text-2xl font-bold">
              {{ orderStatusStrMap[orderData.orderStatusStr] }}
            </text>
          </view>

          <!-- 倒计时 -->
          <view class="flex items-center space-x-2 text-sm" v-if="orderData.orderStatusStr === '1'">
            <view class="i-carbon-time text-lg" />
            <wd-count-down :time="time">
              <template #default="{ current }">
                <view class="flex items-center font-mono">
                  <span class="rounded bg-orange-400 text-white px-2 py-1">
                    {{ current.hours }}
                  </span>
                  <span class="mx-1">:</span>
                  <span class="rounded bg-orange-400 text-white px-2 py-1">
                    {{ current.minutes }}
                  </span>
                  <span class="mx-1">:</span>
                  <span class="rounded bg-orange-400 text-white px-2 py-1">
                    {{ current.seconds }}
                  </span>
                </view>
              </template>
            </wd-count-down>
          </view>
          <!-- 已完成状态提示 -->
          <view v-else class="flex items-center space-x-2 bg-white/10 rounded-lg p-3">
            <view class="i-carbon:tennis text-lg" />
            <text class="flex-1 text-sm">订单已完成，祝您运动愉快！</text>
          </view>
        </view>
        <view class="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-white/10" />
      </view>

      <!-- 主体内容 -->
      <view class="mt-6 space-y-4">
        <!-- 商品信息 -->
        <view class="animate-slide-up animate-delay-100">
          <view class="rounded-2xl bg-white p-4 shadow-sm">
            <view class="mb-4 flex items-center space-x-2 border-b pb-3">
              <view class="i-carbon-shopping-bag text-blue-500" />
              <text class="font-medium">购买商品</text>
            </view>
            <view v-for="item in orderData.orderVoList" :key="item.id">
              <!-- 商品基本信息 -->
              <view class="flex items-center space-x-3 py-3 animate-fade-in">
                <view
                  class="h-16 w-16 rounded-xl bg-gray-100 object-cover shadow-inner flex items-center justify-center"
                >
                  <view class="i-carbon-shopping-bag text-3xl text-gray-500" />
                </view>
                <view class="flex-1">
                  <text class="font-medium text-gray-800">{{ item.orderName }}</text>
                  <view class="mt-1 flex items-center justify-between text-sm">
                    <text class="text-gray-500">x{{ item.orderItemVoList[0].goodsNum }}</text>
                    <text class="font-bold text-orange-500">
                      ￥{{ (item.orderActualMoney / 100).toFixed(2) }}
                    </text>
                  </view>
                </view>
              </view>
              <!-- 分隔线 -->
              <view class="my-3 border-t border-dashed border-gray-200"></view>
              <!-- 预订详情 -->
              <view
                class="bg-gray-50 rounded-xl p-4 space-y-2"
                v-if="item.orderItemVoList[0].goodsJson !== ''"
              >
                <view class="text-sm text-gray-500 mb-2 flex items-center">
                  <view class="i-carbon-information text-blue-500 mr-2"></view>
                  <text>预订详情</text>
                </view>
                <view
                  v-for="(value, key, index) in JSON.parse(item.orderItemVoList[0].goodsJson)"
                  :key="index"
                  class="flex items-center justify-between py-2"
                >
                  <text class="text-gray-500">{{ key }}：</text>
                  <text class="text-gray-700 font-medium">{{ value }}</text>
                </view>
              </view>
              <!-- 底部间距 -->
              <view class="mb-4"></view>
            </view>
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="animate-slide-up animate-delay-200">
          <view class="rounded-2xl bg-white p-4 shadow-sm">
            <view class="mb-4 flex items-center space-x-2 border-b pb-3">
              <view class="i-carbon-receipt text-blue-500" />
              <text class="font-medium">订单信息</text>
            </view>
            <view class="space-y-2 text-sm">
              <view class="flex justify-between">
                <text class="text-gray-500">订单名称：</text>
                <text class="font-mono text-gray-700">{{ orderData.orderName }}</text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">支付编号：</text>
                <text class="font-mono text-gray-700">{{ orderData.orderPayNo }}</text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">下单时间：</text>
                <text class="text-gray-700">{{ formatDate(orderData.createTime) }}</text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">总金额：</text>
                <text class="text-gray-700">
                  ￥{{ currency(orderData.orderTotalMoney).divide(100) }}元
                </text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">优惠券金额：</text>
                <text class="text-gray-700">{{ orderData.orderCouponMoney }}元</text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">促销金额：</text>
                <text class="text-gray-700">{{ orderData.orderReduceMoney }}元</text>
              </view>
              <view class="flex justify-between">
                <text class="text-gray-500">订单备注：</text>
                <text class="font-mono text-gray-700">{{ orderData.orderRemark }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 支付方式 -->
        <view class="animate-slide-up animate-delay-300">
          <view class="rounded-2xl bg-white p-4 shadow-sm">
            <view class="mb-4 flex items-center space-x-2 border-b pb-3">
              <view class="i-carbon-wallet text-blue-500" />
              <text class="font-medium">支付方式</text>
            </view>
            <wd-radio-group v-model="payType" cell>
              <wd-radio
                class="flex items-center justify-between rounded-lg transition-all !mb-2"
                :class="[
                  payType === item.value
                    ? 'bg-blue-50 border border-blue-200'
                    : 'bg-gray-50 hover:bg-gray-100',
                ]"
                @click="payType = item.value"
                v-for="item in payMethods"
                :key="item.value"
                :value="item.value"
              >
                <view :class="item.icon" class="text-2xl" />
                {{ item.label }}
              </wd-radio>
            </wd-radio-group>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view
      v-if="orderData.orderStatusStr === '1'"
      class="p-4 bg-white border-t border-gray-100/60 backdrop-blur-md box-border"
    >
      <!-- 主操作区 -->
      <div class="flex flex-col space-y-4">
        <!-- 金额展示 -->
        <div class="flex justify-between items-center px-2">
          <span class="text-gray-500 text-sm font-medium">应付金额</span>
          <div class="flex items-baseline space-x-1">
            <span
              class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent"
            >
              ￥{{ currency(orderData.orderActualMoney).divide(100) }}
            </span>
            <!-- <span class="text-gray-400 text-sm">含押金￥20</span> -->
          </div>
        </div>

        <!-- 操作按钮组 -->
        <div class="flex flex-col space-y-3">
          <!-- 主支付按钮 -->
          <wd-button
            type="primary"
            @click="palyOrder"
            :loading="loading"
            class="w-full h-14 rounded-xl active:scale-[0.98] transition-transform"
          >
            <div class="flex items-center justify-center space-x-3">
              <span class="i-carbon-wallet text-lg text-white/90"></span>
              <span class="text-lg font-semibold text-white tracking-wide">立即支付</span>
            </div>
          </wd-button>
        </div>
      </div>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getPayOrderInfo, cardPay } from '@/service/index/order'
import { getTimeDifference } from '@/utils/common'
import currency from 'currency.js'
import { useToast } from 'wot-design-uni/components/wd-toast'

const time = computed(() => {
  return getTimeDifference(dayjs().format('YYYYMMDDHHmmss'), orderData.value.payExpireTime)
})

const toast = useToast()

const showCancelHint = ref(false)

const orderStatusStrMap = {
  1: '待支付',
  2: '已完成',
}

const orderData = ref({})

const orderId = ref('')

// 获取订单详情数据
const getOrderInfoData = () => {
  getPayOrderInfo({
    orderPayNo: orderId.value,
  }).then((res) => {
    if (res.code === 0) {
      orderData.value = res.data
      console.log(res.data)
      if (res.data.orderName === '一卡通充值') {
        payMethods.value = [
          {
            value: 1,
            label: '微信支付',
            icon: 'i-carbon-logo-wechat text-green-500',
          },
        ]
        payType.value = 1
      }
      // console.log(orderData.value)
    }
  })
}

onLoad((query) => {
  orderId.value = query.id
  getOrderInfoData()
})

const payMethods = ref([
  // {
  //   value: 1,
  //   label: '微信支付',
  //   icon: 'i-carbon-logo-wechat text-green-500',
  // },
  {
    value: 3,
    label: '一卡通支付',
    icon: 'i-carbon:sim-card text-purple-500',
  },
])

const payType = ref(3) // 默认选择一卡通

const handleCancel = () => {
  uni.showModal({
    title: '确认取消订单？',
    content: '订单取消后将不可恢复',
    confirmColor: '#ef4444',
    success(res) {
      if (res.confirm) {
        setTimeout(() => (showCancelHint.value = false), 1000)
      }
    },
  })
}

const formatDate = (timestamp) => {
  return dayjs(timestamp, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm')
}

// 提交支付
const loading = ref(false)
const palyOrder = () => {
  wx.requestSubscribeMessage({
    tmplIds: ['dDlWqViF-j8TS-xpv85KQwQXjH9nBh8cBNhwpY48Sb0'],
    success(res) {
      if (res['dDlWqViF-j8TS-xpv85KQwQXjH9nBh8cBNhwpY48Sb0'] === 'accept') {
        // 用户同意订阅，可以发送消息
        // sendSubscriptionMessage();
      } else {
        // 用户拒绝订阅
        wx.showToast({
          title: '您拒绝了订阅消息授权',
          icon: 'none',
        })
      }
    },
  })
  if (payType.value === 1) {
    uni.navigateTo({
      url: '/pages/card/topup',
    })
  } else {
    loading.value = true
    cardPay({
      payMoney: orderData.value.orderActualMoney,
      orderPayNo: orderData.value.orderPayNo,
    })
      .then((res) => {
        if (res.code === 0) {
          toast.success('支付成功')
        } else {
          if (res.code === 123) {
            uni.navigateTo({
              url: '/pages/card/topup',
            })
          }
        }
        getOrderInfoData()
      })
      .finally(() => {
        loading.value = false
      })
  }
}

const handleClickLeft = () => {
  uni.switchTab({ url: '/pages/order/index' })
}
</script>

<style>
/* 自定义动画 */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake-x {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-shake-x {
  animation: shake-x 0.4s ease-in-out;
}

.shadow-up {
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
}
</style>
